<template>
	<view>
		<block v-if="attachmentList.length>0">
			<view class="main-tu-item" :style="{ marginTop: fileStyle }" v-for="(item,index) in attachmentList" :key="index"
				@tap.stop="showFlile(item.uploadOssUrl,item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1))">
				<view class="tu-item-logo">
					<image v-if="item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1)==='pdf'" mode="aspectFill"
						src="https://zicaicloud-prod.oss-cn-zhangjiakou.aliyuncs.com/zicaiquan/static/common/pdf.svg">
					</image>
					<image v-else-if="item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1)==='docx'" mode="aspectFill"
						src="https://zicaicloud-prod.oss-cn-zhangjiakou.aliyuncs.com/zicaiquan/static/common/word.svg">
					</image>
					<image v-else-if="item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1)==='xlsx'" mode="aspectFill"
						src="https://zicaicloud-prod.oss-cn-zhangjiakou.aliyuncs.com/zicaiquan/static/common/excel.svg">
					</image>
					<image v-else-if="item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1)==='ppt'" mode="aspectFill"
						src="https://zicaicloud-prod.oss-cn-zhangjiakou.aliyuncs.com/zicaiquan/static/common/ppt.svg">
					</image>
					<image v-else mode="aspectFill"
						src="https://zicaicloud-prod.oss-cn-zhangjiakou.aliyuncs.com/zicaiquan/static/common/other.svg">
					</image>
				</view>
				<view class="tu-item-cont">
					{{item.uploadName}}
				</view>
				<view class="ti">
					<u-icon name="arrow-right" color="#C9CDD4" size="14"></u-icon>
				</view>
			</view>
		</block>
		<u-modal :show="CopyShow" showCancelButton confirmText="复制" @confirm="confirmCopy" @cancel="CopyShow = false">
			<view class="slot-content">
				<view class="slotText"><text style="color: #000000;">下载地址（您可复制转发给所需要的客户进行文件下载）：</text>{{CopyUrl}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			attachmentList: {
				type: Array,
				default: function() {
					return []
				}
			},
			fileStyle: {
				type: String | Number
			}
		},
		watch: {
		   attachmentList(newVal, oldVal) {
		       this.otherMethod();
		   }
		 },
		data() {
			return {
				CopyShow:false,
				CopyUrl:'',
			}
		},
		methods: {
			otherMethod(){
				if(this.attachmentList&&this.attachmentList.length>0){
					this.attachmentList.forEach(item=>{
						if(item.uploadName){
							this.$set(item,'extension',item.uploadName.substring(item.uploadName.lastIndexOf('.') + 1))
						}
					})
				}
			},
			//打开文件
			showFlile(url, extension) {
				console.log(url, extension,'url, extension')
				let that = this
				// &&uni.getSystemInfoSync().platform == 'ios'
				if(extension === 'pdf'){
					console.log('111111')
					uni.navigateTo({
						url: `/PageA/common/webview?url=${url}`
					})
				}else{
					console.log('22222')
					uni.getSavedFileList({
						success: function(res) {
							if (res.fileList.length > 0) {
								wx.getFileSystemManager().removeSavedFile({
									filePath: res.fileList[0].filePath,
									complete: function(res) {
										console.log(res)
									}
								})
							}
						}
					})
					if (extension === 'jpg' || extension === 'png') {
						uni.previewImage({
							urls: [url],
							fail(e) {
								console.log('IMG-fail', e)
							},
							success(e) {
								console.log('IMG-ok', e)
							}
						})
					}
					// &&uni.getSystemInfoSync().platform == 'ios'
					// else if(extension === 'pdf'){
					// 	uni.navigateTo({
					// 		url: `/PageA/common/webview?url=${url}`
					// 	})
					// }
					else {
						uni.showLoading({
							title: '正在打开...'
						})
						uni.downloadFile({
							url,
							success(res) {
								if (res.statusCode === 200) {
									uni.getFileSystemManager().saveFile({
										tempFilePath: res.tempFilePath,
										success: function(save) {
											uni.openDocument({
												filePath: save.savedFilePath,
												showMenu: true,
												success: function(open) {
													uni.hideLoading()
													console.log(open)
												},
												fail(e) {
													uni.hideLoading()
													console.log('openfile', e)
													that.CopyUrl = url
													that.CopyShow = true
												}
											})
										},
										fail(e) {
											uni.hideLoading()
											console.log('savefile', e)
										}
									})
								}
							},
							fail(e) {
								console.log(e)
							}
						})
					}
				}
			},
			confirmCopy(){
				let that = this
				// 复制文本到剪切板
				uni.setClipboardData({
				  data: that.CopyUrl,
				  success: function() {
				    console.log('复制成功');
					that.CopyShow = false
				  }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-tu-item {
		display: flex;
		align-items: center;
		background-color: #F6F7F9;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		margin-top: 20rpx;
		padding: 20rpx;

		.tu-item-logo {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tu-item-cont {
			position: relative;
			width: calc(100% - 100rpx);
			word-break: break-all;

			.ti {
				position: absolute;
				right: 0rpx;
			}
		}
		.ti {
			margin-left: 12rpx;
		}
	}
	.slotText{
		color: #666666;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
	}
</style>
